<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>计算属性</p>
        <p>
            依赖缓存：当源数据没有变化时，会将计算结果缓存起来，方便下次使用，避免重复计算
        </p>
        <p v-for="item in res">
            <span>姓名：{{item.name}}</span>
            <span>成绩：{{item.point}}</span>
        </p>
        <p>平均成绩：{{avePoint}}</p>
        <p>平均成绩：{{avePoint1()}}</p>
        <hr>

        <input type="text" v-model="age">
        <p>你的年龄：{{age}}岁</p>
        <p>{{info}}</p>
        <hr>

        <input type="text" v-model="process">
        <p>{{msg}}</p>
        <p v-show="iscom">恭喜你，完成项目！</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                res: [
                    { name: '张三', point: 90 },
                    { name: '李四', point: 80 },
                    { name: 'vutal', point: 100 }
                ],
                age: 8,
                info: '',
                //项目进程
                process: 0,
                msg: '当前进度为0',
                iscom: false
            },
            watch: {
                age: function (newVuale, oldValue) {
                    console.log(newVuale, oldValue);
                    if (newVuale < 18) {
                        this.info = '未成年人禁止入内！';
                    } else if (newVuale == 18) {
                        this.info = '你已经18岁了！';
                    } else {
                        this.info = '加油，快退休了！';
                    }
                },
                //监听工程进度的变化
                process: function (newVuale, oldValue) {
                    if (newVuale == 100) {
                        this.msg = '当前工程完成啦！';
                    } else if (newVuale >= 90) {
                        this.msg = '当前工程快完成了。';
                    } else if (newVuale > 50) {
                        this.msg = '当前工程进度已过半。';
                        iscom = true;
                    } else {
                        this.msg = '加油完成项目，冲冲冲！';
                    }
                }
            },
            //计算属性
            computed: {
                avePoint() {
                    let num = 0;
                    this.res.forEach(item => {
                        num += item.point
                    });
                    let len = this.res.length;
                    let totalNum = num / len;
                    return totalNum
                }
            },
            methods: {
                avePoint1() {
                    let num = 0;
                    this.res.forEach(item => {
                        num += item.point
                    });
                    let len = this.res.length;
                    let totalNum = num / len;
                    return totalNum
                }
            }
        });
    </script>
</body>

</html>